<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        	xmlns:s="http://jboss.com/products/seam/taglib"
        	xmlns:ui="http://java.sun.com/jsf/facelets"
        	xmlns:f="http://java.sun.com/jsf/core"
        	xmlns:h="http://java.sun.com/jsf/html"
        	xmlns:rich="http://richfaces.org/rich"
        	xmlns:a4j="http://richfaces.org/a4j"
        	xmlns:richx="http://richfaces.org/richx"
                xmlns:m="http://metawidget.org/faces"
        	template="layout/template.xhtml">

	<ui:define name="header">
		<ui:include src="/include/header.xhtml" />
	</ui:define>

	<ui:define name="content">
		<h:form>
		   <div class="search-box">
                	<h:inputText required="true" value="#{forecaster.searchLocation}" styleClass="search-input"></h:inputText>
			<h:commandButton value="#{res['app.mainmenu.search']}" action="#{forecaster.search}" styleClass="search-button"/>
		   </div>
		</h:form>

         	<div id="messages">
       			<!--rich:messages layout="list" tooltip="true" showDetail="false" showSummary="true" 
      			    	       errorLabelClass="errorLabel" fatalLabelClass="warnLabel"
    			    	       infoLabelClass="infoLabel"   warnLabelClass="fatalLabel"
     			    	       warnMarkerClass="markerWarn" infoMarkerClass="markerInfo"
     			    	       errorMarkerClass="markerError" fatalMarkerClass="markerFatal"
     			    	       errorClass="errorClass"	fatalClass="fatalClass"	warnClass="warnClass"
     			    	       infoClass="infoClass"	labelClass="labelClass"
   			    	       var="messages" styleClass="class">

      				<f:facet name="errorMarker">
      					<h:graphicImage url="images/error.gif"/>
      				</f:facet>
          	      		<f:facet name="fatalMarker">
          	      			<h:graphicImage url="images/fatal.gif"/>
          	      		</f:facet>
          	      		<f:facet name="infoMarker">
          	      			<h:graphicImage url="images/info.gif"/>
          	      		</f:facet>
          	      		<f:facet name="warnMarker">
          	      			<h:graphicImage url="images/warn.gif"/>
          	      		</f:facet>
          	      		<f:facet name="passedMarker">
          	      			<h:graphicImage url="images/passed.gif"/>
          	      		</f:facet> 
      			</rich:messages-->
         	</div>


		<div class="weatherImage">		
			<h:graphicImage value="#{todayForecast.image}" alt="#{todayForecast.startDate} - #{todayForecast.forecastBriefDescription}"/>	
			<h:outputText id="metropolitanArea" value="#{res['app.label.metropolitanArea']}" escape="false" styleClass="forecast-section-label" />
		</div>

		<div>
			<m:metawidget value="#{forecaster.todayForecast}"/>
		</div>	


		<div>
		  <h:outputText id="WeeklyForecast" value="#{res['app.label.weeklyForecast']}" escape="false" styleClass="forecast-section-label"/>

		  <h:form>
        	  	<rich:dataGrid id="idWeeklyForecast" value="#{weeklyForecast}" var="f" columns="1" elements="10" first="0" width="970px" columnClasses="forecastPanel">
            			<rich:panel bodyClass="rich-laguna-panel-no-header">

                			<h:panelGrid columns="2">
					   <h:panelGrid columns="1"> 	
				        	<h:graphicImage value="#{f.image}" alt="#{f.forecastBriefDescription}"/>	 
					   </h:panelGrid>

                			   <h:panelGrid columns="2">
                    				<h:outputText value="#{f.startDate}" styleClass="forecast-label" >
							<f:convertDateTime dateStyle="full" />
						</h:outputText>
						<h:outputText value="" />
	
                    				<h:outputText value="#{f.forecastBriefDescription}" styleClass="forecast-label"  />
						<h:outputText value="" />

						<h:outputText value="&#8451;" styleClass="forecast-label" />
                    				<h:outputText value="#{f.temperatureRangeAsString}" escape="true" styleClass="forecast-value"/>

                                                <h:outputText value="#{res['app.label.chanceOfRain']}" styleClass="forecast-label" />
                                                <h:outputText value="#{f.precipitationProbability}" styleClass="forecast-value">
							<f:convertNumber pattern="# '%'"/>
                                                </h:outputText>

                                                <h:outputText value="#{res['app.label.Rainfall']}" styleClass="forecast-label" />
                                                <h:outputText value="#{f.precipitationRange}" />

                                                <h:outputText value="#{res['app.label.fireAlert']}" styleClass="forecast-label" />
                                                <h:outputText value="#{f.fireAlert}" />

                                                <h:outputText value="#{res['app.label.uvAlert']}" styleClass="forecast-label" />
                                                <h:outputText value="#{f.uvAlert}" />

                			   </h:panelGrid>
               			        </h:panelGrid>

                  			<h:outputText value="#{f.forecastDetailedDescription}" />
            			</rich:panel>

            			<f:facet name="footer">
            			</f:facet>
        		</rich:dataGrid>

        	  </h:form>

		</div>	
	</ui:define>

	<ui:define name="footer">
         	<ui:include src="/include/copyright.xhtml"/>
	</ui:define>
</ui:composition>